<template>
	<view class="info">
		<u-cell-item class="info-cell_item avatar" :title-style="titleStyle" bg-color="#ffffff" :title="$t('mine.user_head')"
			:arrow="false" style="padding-right: 16rpx">
			<view class="info-cell_item--avatar">
				<u-image v-if="actForm.AvatarImg" width="130rpx" height="130rpx" border-radius="40"
					:src="actForm.AvatarImg"></u-image>
				<u-avatar-upload ref="uploadRef" width="130" height="130" upload-text=""
					:action="action" :file-list="fileList" :formData="formData" :imageMode="'aspectFitll'"
					@on-success="uploadSuccessCallback" maxSize="10" :maxSizeErrorText="$t('mine.avatar_upload_maxsize')"  maxCount="1" style="border-radius: 50rpx;text-align:center;"
					@on-remove="removeavatar"></u-avatar-upload>
			</view>
		</u-cell-item>
		<u-cell-item class="info-cell_item" :title-style="titleStyle" bg-color="#ffffff" :title="$t('mine.user_nickname')"
			:arrow="false">
			<view class="info-cell_item--input">
				<u-input v-model="actForm.Nickname" :placeholder="$t('mine.for_example') + ': user8800453'" type="text"
					:border="false" :clearable="false" input-align="right"
					:disabled="actForm.UserType == 2 ? false: true" />
			</view>
		</u-cell-item>
		<u-cell-item v-show="actForm.UserType == 2" class="info-cell_item" :title-style="titleStyle" bg-color="#ffffff"
			:title="$t('mine.user_corp')" :arrow="false">
			<view class="info-cell_item--input">
				<u-input v-model="actForm.Corp" :placeholder="$t('mine.input_corp')" type="text" :border="false"
					:clearable="false" input-align="right" />
			</view>
		</u-cell-item>
		<u-cell-item v-show="actForm.UserType == 2" class="info-cell_item" :title-style="titleStyle" bg-color="#ffffff"
			:title="$t('mine.user_pos')" :arrow="false">
			<view class="info-cell_item--input">
				<u-input v-model="actForm.Post" :placeholder="$t('mine.input_pos')" type="text" :border="false"
					:clearable="false" input-align="right" />
			</view>
		</u-cell-item>
		<u-cell-item v-if="actForm.UserType == 2" class="info-cell_item" :title-style="titleStyle" bg-color="#ffffff"
			:title="$t('mine.user_email')" :arrow="false">
			<view v-if="actForm.Email != '' && actForm.EmailVerify == 1" class="info-cell_item--text"
				style="line-height: 20rpx;margin-top: 40rpx" @click="$goPage('/mine/email/verify',{type:2})">
				{{ actForm.Email }}
				<text class="icon icon-arrow-r u-font-xs"></text>
			</view>
			<text v-if="actForm.Email != '' && actForm.EmailVerify == 1" class="info-cell_item--label u-font-xs"
				style="margin-right: 20rpx" @click="$goPage('/mine/email/verify',{type:1})">{{$t('mine.btn_go_verify')}}
			</text>
			<view v-if="actForm.Email != '' && actForm.EmailVerify == 2" class="info-cell_item--text"
				@click="$goPage('/mine/email/verify',{type:2})">{{ actForm.Email }}
			</view>
		</u-cell-item>
		<u-cell-item v-if="actForm.UserType == 2" class="info-cell_item" :title-style="titleStyle" bg-color="#ffffff"
			:title="$t('mine.user_tel')" :arrow="false">
			<view class="info-cell_item--input">
				<view class="info-cell_item--input__code">
					<u-input v-model="actForm.AreaCode" type="text" :border="false" :clearable="false"
						input-align="right" :placeholder="$t('mine.countr_code')" style="width: 200rpx;margin-left:-70rpx" />
				</view>
				<u-input v-model="actForm.Mobile" :placeholder="$t('mine.input_tel')" type="number" maxlength="11"
					:border="false" :clearable="false" input-align="right" />
			</view>
		</u-cell-item>
		<view class="u-code" v-if="actForm.UserType == 2">· {{$t('mine.corp_code')}}</view>
		<view class="info-button">
			<u-button type="primary" @click="checkPhone">{{$t('mine.btn_save')}}</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import indexList from "../../../static/country.js"
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				mobile: '',
				company: '',
				position: '',
				actForm: {
					catalog: 'avatar'
				},
				titleStyle: {
					color: '#131313',
					fontSize: '32rpx'
				},
				formData: {},
				action: '',
				fileList: [],
			}
		},
		onLoad() {
			this.$store.commit('checkUserLogin');
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('mine.my_info')
			})
			this.init();
		},
		components: {},
		computed: {
			...mapState({
				userInfo: state => state.vuex_user,
			}),
			i1n8() {
				return this.$t('mine')
			}
		},
		methods: {
			init() {
				this.getInfo();
				this.action = this.fileUploadUrl;
				this.formData = {
					catalog: 'avatar'
				};
			},
			getInfo() {
				this.$http.get('/client/user/account/info', {}).then(res => {
					this.actForm = res;
					console.log(JSON.stringify(res))
					if (res.AvatarImg != '') {
						this.fileList=[{
							url: res.AvatarImg
						}]
						this.userAvatar = res.AvatarImg;
					}
				});
			},
			uploadSuccessCallback(data) {
				console.log("上传成功了");
				let avatar = data.data.filepath || '';
				this.uploadUserAvatar(avatar);
			},
			removeavatar() {
				console.log("删除成功了");
				this.actForm.Avatar = '';
				this.uploadUserAvatar('');
			},
			checkPhone() {
				if (this.actForm.Mobile == "") {
					this.submit();
				} else {
					if (this.actForm.AreaCode == "") {
						uni.showModal({
							title: this.$t('mine.remind'),
							content: this.$t('mine.corp_code_noempty'),
							showCancel: false
						});
						return
					}
					this.$http.get('/client/user/account/check/phone', {
						areaCode: this.actForm.AreaCode,
						mobile: this.actForm.Mobile
					}).then(res => {
						if (res.format == 0) {
							uni.showModal({
								title: this.$t('mine.remind'),
								content: this.$t('mine.check_phone'),
								showCancel: false
							});
							return;
						} else {
							this.submit()
						}
					});
				}
			},
			submit() {
				let that = this;
				this.$http.post('/client/user/account/save', this.actForm, this.$store.state.jHeader).then(res => {
					uni.showToast({
						title: this.$t('mine.save_success'),
					});
					this.userUname = this.actForm.Nickname;
					this.getInfo();
					setTimeout(function() {
						that.$store.commit("updateTimUserInfo");
						// uni.navigateBack({
						//     delta: 1
						// });
						uni.navigateBack({

						})
					}, 1000);

				});
			},
			uploadUserAvatar(avatar) {
				let that = this;
				that.actForm.avatar = avatar;
				that.$http.post('/client/user/account/avatar/save', that.actForm, this.$store.state.jHeader).then(res => {
					if (that.actForm.avatar != '') {
						uni.showToast({
							title: that.$t('mine.save_success'),
						});
					}
					that.init();
					setTimeout(function() {
						that.$store.commit("updateTimUserInfo");
					}, 1000);
			
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
::v-deep .u-preview-image {
	border-radius: 20rpx;
}
::v-deep  .u-list-item {
	border-radius: 30rpx;
}
</style>
<style lang="scss" scoped>
	.info {}

	.u-code {
		color: #91959a;
		font-size: 24rpx;
		margin-top: 6rpx;
		margin-left: 16rpx;
	}
	.info-cell_item {
		height: 100rpx;
		background-color: #ffffff;
		&.avatar {
			height: 150rpx;
			// padding: 10rpx 0;
		}
		&--text {
			color: #131313;
		}

		&--avatar {
			position: relative;
			width: 150rpx;
			height: 150rpx;
			margin-left: auto;
			padding: 10rpx;

			.u-upload {
				z-index: 999;
				position: absolute;
				top: 0;
				left: 0;
			}

			.u-list-item {
				margin: 0 ;
				opacity: 0;
			}

		}

		&--label {
			color: $u-type-primary;
			margin-left: 20rpx;

			.icon {
				font-size: 26rpx;
			}
		}

		&--input {
			position: relative;
			width: 74%;
			margin-left: auto;

			&__code {
				z-index: 999;
				position: absolute;
				left: 16rpx;
				top: 6rpx;
				width: 156rpx;
				text-align: right;
				padding-right: 16rpx;
				border-right: 1rpx solid #eee;

				.u-icon {
					margin-left: 6rpx;
				}
			}
		}
	}

	.info-button {
		margin-top: 72rpx;
		padding: 0 80rpx;
	}

	.check {
		width: 600rpx;
		padding: 40rpx;

		&-title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}

		&-item {
			width: 100%;
			background-color: #fff;
			height: 106rpx;
			padding: 0 24rpx 0 18rpx;
			color: #909399;

			&_code {
				color: #343434;
			}
		}
	}
</style>
